<template>
  <div class="fktj_low">
    <div class="fktj_low_1">
      <div class="fktj_low_1_11" style="margin-right: 10px">
        <my-date :items="levelItems" width="300"></my-date>
      </div>
      <div class="fktj_low_1_1">
        <my-select :items="levelItems" ph="全部客服组" width="160"></my-select>
      </div>
      <div class="fktj_low_1_1" style="margin-right: 240px">
        <my-select :items="sourceItems" ph="全部客服" width="150"></my-select>
      </div>
      <div class="fktj_low_1_3">
        <my-button color="none">导出当前数据</my-button>
      </div>
    </div>
    <div class="fktj_low_card" style="margin-left: 23px">
      <div class="fktj_low_card_1" style="margin-right: 15px">
        <tongji-card
          :items="sourceItems"
          title="浏览量(PV)"
          data="2300"
          tip="平均浏览页面20"
        ></tongji-card>
      </div>
      <div class="fktj_low_card_1" style="margin-right: 15px">
        <tongji-card
          :items="sourceItems"
          title="访客量(UV)"
          data="30"
          tip="跳出率20%"
        ></tongji-card>
      </div>
      <div class="fktj_low_card_1" style="margin-right: 15px">
        <tongji-card
          :items="sourceItems"
          title="咨询会话数"
          data="208"
          tip="咨询会话率50%"
        ></tongji-card>
      </div>
      <div class="fktj_low_card_1" style="margin-right: 15px">
        <tongji-card
          :items="sourceItems"
          title="总评价数"
          data="67"
          tip="客户评价率80%"
        ></tongji-card>
      </div>
      <div class="fktj_low_card_1" style="margin-right: 15px">
        <tongji-card
          :items="sourceItems"
          title="好评率"
          data="78%"
          tip="评价率67%"
        ></tongji-card>
      </div>
    </div>
    <div class="fktj_low_tjt">
      <div class="fktj_low_tjt-title">浏览量</div>
      <div class="fktj_low_tjt-main">
        <el-tabs v-model="activeName">
          <el-tab-pane label="全部" name="qb"> </el-tab-pane>
          <el-tab-pane label="网页" name="wy"></el-tab-pane>
          <el-tab-pane label="手机APP" name="app"></el-tab-pane>
          <el-tab-pane label="微信公众号" name="gzh"></el-tab-pane>
          <el-tab-pane label="微信小程序" name="xcx"></el-tab-pane>
          <el-tab-pane label="微博" name="wb"></el-tab-pane>
          <el-tab-pane label="头条号" name="tth"> </el-tab-pane>
        </el-tabs>
        <div
          ref="fkltjChart"
          :style="{ width: '900px', height: '400px' }"
        ></div>
      </div>
    </div>
    <div style="width: 1020px">
      <div class="fktj_low_2">
        <base-table :mydata="CzData" :mytitle="CzTitle" type=""></base-table>
      </div>
    </div>
  </div>
</template>

<script>
import TongjiCard from "@/components/TongjiCard";
import BaseTable from "@/components/MyTable/BaseTable.vue";
import MySelect from "@/components/MyInput/MySelect";
// import MySearch from "@/components/MyInput/MySearch";
import MyButton from "@/components/MyInput/MyButton";
import MyDate from "@/components/MyInput/MyDate";
export default {
  components: {
    // MySearch,
    MyButton,
    BaseTable,
    MySelect,
    MyDate,
    TongjiCard,
  },
  mounted() {
    this.drawLine();
  },
  data() {
    return {
      activeName: "qb",
      CzData: [
        {
          name: "网页",
          time: "5000",
          time1: "300",
          time2: "3000",
          time3: "1000",
        },
        {
          name: "手机app",
          time: "5000",
          time1: "300",
          time2: "3000",
          time3: "1000",
        },
        {
          name: "微信公众号",
          time: "5000",
          time1: "300",
          time2: "3000",
          time3: "1000",
        },
        {
          name: "微信小程序",
          time: "5000",
          time1: "300",
          time2: "3000",
          time3: "1000",
        },
        {
          name: "微博",
          time: "5000",
          time1: "300",
          time2: "3000",
          time3: "1000",
        },
        {
          name: "头条号",
          time: "5000",
          time1: "300",
          time2: "3000",
          time3: "1000",
        },
      ],
      CzTitle: [
        {
          name: "来源类型",
          prop: "name",
          width: 140,
        },
        {
          name: "浏览量",
          prop: "time",
          width: 213,
        },
        {
          name: "访客量",
          prop: "time1",
          width: 213,
        },
        {
          name: "访问次数",
          prop: "time2",
          width: 213,
        },
        {
          name: "平均页面浏览时长",
          prop: "time3",
          width: 213,
        },
      ],
      sourceItems: [
        {
          label: "王美美",
          value: 0,
        },
        {
          label: "七尾",
          value: 1,
        },
        {
          label: "李想",
          value: 2,
        },

        {
          label: "王志",
          value: 3,
        },
      ],
      levelItems: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "客服组一",
          value: 1,
        },
        {
          label: "客服组二",
          value: 2,
        },

        {
          label: "客服组三",
          value: 3,
        },
      ],
    };
  },
  methods: {
    drawLine() {
      var myChart = this.$echarts.init(this.$refs.fkltjChart);
      myChart.setOption({
        title: {
          // text: "访问量统计"
        },
        tooltip: {
          trigger: "axis",
          // 坐标轴指示器配置项。
          axisPointer: {
            type: "cross", //指示器样试
          },
        },
        toolbox: {
          feature: {
            // 动态类型切换,切换图表
            magicType: {
              type: ["line", "bar"],
            },
            //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
            dataView: {
              show: true, //是否显示 数据示图
              readOnly: false, //是否 直接可以编辑数据。
            },
            //保存为图片的配置
            saveAsImage: {
              show: true,
            },
            //配置项还原
            restore: { show: true },
          },
        },
        //图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        legend: {
          data: ["总访问量", "总会话量", "有效会话量"], //对应的是name
        },
        //配置X轴
        xAxis: {
          //坐标轴类型
          type: "category",
          //配置类目名称。 可以逐一设置，具体看文档
          data: [
            "10:00",
            "10:30",
            "11:00",
            "11:30",
            "12:00",
            "12:30",
            "13:00",
            "13:30",
            "14:00",
            "14:30",
            "15:00",
            "15:30",
            "16:00",
            "16:30",
            "17:00",
          ],
          //配置 鼠标移入时显示的 阴影指示器'line' 直线指示器 'shadow' 阴影指示,器  'none' 无指示器
          axisPointer: {
            show: true, //show 必须写，开关的作用
            type: "shadow",
          },
        },
        //配置Y轴
        yAxis: [
          {
            type: "value", //坐标轴类型
            // name: "会话数",
            min: 0,
            max: 75,
            interval: 15,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        //系列列表。每个系列通过 type 决定自己的图表类型,一个对象表示一个列表
        series: [
          {
            name: "总访问量",
            type: "line",
            data: [40, 34, 36, 50, 48, 62, 49, 50, 55, 65, 57, 65, 70, 56, 61],
            itemStyle: {
              color: "#90EE90",
            },
          },
          {
            name: "总会话量",
            type: "line",
            data: [33, 27, 32, 45, 40, 52, 43, 44, 42, 55, 42, 35, 45, 33, 31],
            itemStyle: {
              color: "#FF0000",
            },
          },

          {
            name: "有效会话量",
            type: "line",
            data: [25, 25, 30, 33, 35, 42, 33, 24, 32, 45, 32, 25, 40, 30, 25],
            itemStyle: {
              color: "#F90",
            },
          },
        ],
        //图表的颜色
        color: [
          "#CCC",
          "#AFA",
          "#61a0a8",
          "#d48265",
          "#91c7ae",
          "#749f83",
          "#ca8622",
          "#bda29a",
          "#6e7074",
          "#546570",
          "#c4ccd3",
        ],
      });
      //鼠标事件
      myChart.on("click", function (params) {
        console.log(params);
      });
    },
  },
};
</script>

<style>
.fktj_low {
  width: 1040px;
  height: 1175px;
  background-color: #ffffff;
  padding-top: 3px;
}
.fktj_low_1_11 {
  padding-left: 10px;
}
.fktj_low_1 {
  display: flex;
  margin-top: 20px;
  margin-left: 12px;
}
.fktj_low_1_1 {
  margin-right: 10px;
}
.fktj_low_card {
  display: flex;
  margin-top: 25px;
}
.fktj_low_2 {
  width: 100%;
  margin-top: 20px;
  margin-left: 10px;
  padding-left: 10px;
}
.fktj_low_tjt {
  height: 480px;
}

.fktj_low_tjt-title {
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  padding: 20px 20px;
}

.fktj_low_tjt-main {
  padding: 0 20px;
}
</style>